<!-- src/components/NavigationBar.vue -->
<template>
  <div class="navigation-bar">
    <router-link to="/dixing">地形图</router-link>
    <router-link to="/shiliang">矢量图</router-link>
    <router-link to="/yingxiang">影像图</router-link>
    <router-link to="/geoserver">GeoServer 图层</router-link>
    <router-link to="/cesium">Cesium</router-link>
    <router-link to="/drawGraph">DrawGraph</router-link>
    <router-link to="/relitu">热力图</router-link>
  </div>
</template>

<script setup>
</script>

<style scoped>
.navigation-bar {
  /* 更改位置和布局 */
  position: fixed;
  bottom: 30px;
  right: 70px;
  display: flex;
  flex-direction: column; /* 设置主轴为垂直方向 */
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.navigation-bar a {
  font-weight: bold;
  color: #2c3e50;
  text-decoration: none;
  margin: 5px 0; /* 调整上下边距来代替左右边距 */
}

.navigation-bar a.router-link-active {
  color: #42b983;
}
</style>
